<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
</head>

<body>
    为什么要清除浮动
    <ol>
        <li>父级没有高度</li>
        <li>子盒子浮动了</li>
        <li>影响了下面的布局</li>
    </ol>
    <h1>额外标签发</h1>
    在最后一个浮动元素的后面添加一个清除浮动的盒子
    <br>
    clear:left/right/both;
    <br>
    <h1>父元素overfloat</h1>
    给父元素添加overfloat属性，将其设置为hidden、auto或scroll.
    <h1>after伪元素</h1>
    .clearfix:after {
    content: "";
    display: block;
    hight: 0;
    clear: both;
    visibility: hidden;
    }
    .clearfix {
    /* IE6、 7专有 */
    *zoom: 1;
    }
    <h1>双伪元素清除浮动</h1>
    .clearfix:before,
    .clearfix:after {
    content: "";
    display: table;
    }

    .clearfix:after {
    clear: both;
    }

    .clearfix {
    *zoom: 1;
    }
</body>

</html>